<template>
	<view style="padding-bottom: 150rpx;">
		<view class="bg">
			<view>
				<view style="font-size: 34rpx;">
					萌萌安家
				</view>
				<view class="u-margin-top-20">为您{{isfree?'免费设计':'加急设计'}}</view>
				<view class="u-margin-top-40 u-font-weight title "> {{isfree?'免费设计':'加急设计'}}</view>
				<view class="u-margin-top-40">当前共有{{list.length}}人排队</view>
			</view>

			<view style="margin-top: 40rpx;">
				<u-image :src="$ftpUrl('/commonDesign.png')" width="240" height="240" border-radius="40"></u-image>
			</view>
		</view>


		<view class="u-padding-30 shadow" style="width: 700rpx;margin: auto;">
			<u-form :model="form" ref="uForm">
				<u-form-item label="姓名" prop="realname" label-width="200">
					<u-input v-model="form.realname" input-align="right" placeholder="请输入姓名"/>
				</u-form-item>
				<u-form-item label="联系电话" prop="mobile" label-width="200">
					<u-input v-model="form.mobile" input-align="right" maxlength="11" placeholder="请输入联系电话"/>
				</u-form-item>
				<u-form-item :border-bottom="false" label="需求备注" label-width="200" label-position="top" prop="remark">
					<u-input placeholder="请输入备注" type="textarea" v-model="form.remark"></u-input>
				</u-form-item>
			</u-form>
			<u-form-item :border-bottom="false" label="户型图上传" label-width="200" label-position="top">
				<upload ref="image1" type="image" @uploaded="uploaded" :afterLoadUrl="form.image_url1"
					background="#FFE3DC" borderRadius="20" iconColor="#FF5D39" width="160" height="160"
					defaultLength="1"></upload>

			</u-form-item>
			<u-form-item :border-bottom="false" label="参考图上传" label-width="200" label-position="top">
				<upload ref="image2" type="image" @uploaded="uploaded" :afterLoadUrl="form.image_url2"
					background="#FFE3DC" borderRadius="20" iconColor="#FF5D39" width="160" height="160"
					defaultLength="3"></upload>
			</u-form-item>
		</view>


		<view class="mode u-flex u-row-between">
			<view class="u-flex">
				<u-image :src="user.headimg" width="80" height="80" border-radius="80"></u-image>
				<view class="u-margin-left-20">
					<view>{{user.nickname}}</view>
					<view class="u-margin-top-10">
						您前面有<text style="color:#FF5D39">{{list.length}}</text>人正在排队哦~
					</view>
				</view>
			</view>
		</view>

		<view class="new shadow" v-if="list.length">
			<swiper :autoplay="autoplay" interval="2000" duration="1500"  :circular="true"  :vertical="true"
				next-margin="60px" previous-margin="60px">
				        <swiper-item v-for="(item,index) in list" :key="index"  >
					<view class="list">
						<view>{{item.nickname}}</view>
						<view style="color: #007AFF;">排队中</view>
					</view>      
				</swiper-item>
				 </swiper>
		</view>

		<view class="u-text-center u-margin-top-20">
			<view style="color: #FF5D39;">加急费将以【优惠券】的方式返还哦~</view>
			<view style="color: #FF5D39;font-size: 100rpx;font-weight: bold;margin-top: 40rpx;">￥{{buyUrgentPrice}}</view>
		</view>



		<view class="u-padding-30">
			<u-section :arrow="false" :right='false' title="图文案例" lineColor="#FF5D39" fontSize="34"></u-section>

		    <wr-article  ID="11" v-if='isfree'></wr-article>
			<wr-article  ID="13" v-else></wr-article>
			
			
		</view>



		<view
			style="background: #fff; border-top: 1rpx solid #e1e1e1; padding: 20rpx; position: fixed;z-index: 999;bottom: 0;display: flex;justify-content: space-around;width: 100%;">
			<u-button v-if="isfree"  @click="add('0')" shape="circle" :custom-style="{background:'#FF5D39',color:'#fff',width:'250rpx',}">
				免费排队</u-button>

			<u-button shape="circle" @click="add('1')" :custom-style="{background:'#FF5D39',color:'#fff',width:'250rpx',}">
				加急免排队</u-button>

		</view>


<u-toast ref="uToast" />
		<!-- <image :src="$ftpUrl('/goDesignBook.png')" class="rightfix"></image> -->


	</view>
</template>

<script>
	import payway from '@/common/wxpay.js';
	import upload from "@/components/upload_img.vue";
	import rules from "@/common/rule.js";
	
	export default {
		components: {
			upload,
			
		},
		data() {
			return {

				list: [],
				user: {},
				autoplay: true,
				buyUrgentPrice:"",
				form: {
					mobile: "",
					realname: "",
					remark: ""
				},
				rules: rules,
				isfree:''
			}
		},
		// 必须要在onReady生命周期，因为onLoad生命周期组件可能尚未创建完毕
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad(options) {
			
			if(options.isfree){
				this.isfree=JSON.parse(options.isfree);
				
			}
			this.$u.api.userInfo().then(res => {
				this.user = res;
			})

            this.$u.api.Commission().then(res => {
				this.buyUrgentPrice=Number(res.buyUrgentPrice).toFixed(2)
			})

			this.getList()
			
			uni.setNavigationBarTitle({
				title:this.isfree?'免费设计':'加急设计'
			})

		},
		methods: {
			add(e) {
				
				
				this.$refs.uForm.validate(valid => {
					if (valid) {
						if (!this.$refs.image1.afterUploadImgList.length) {
							uni.$u.toast("请上传户型图")
							return
						}
						this.$u.post('/indent/design', {
							realname:this.form.realname,
							mobile:this.form.mobile,
							remark:this.form.remark,
							image:this.$refs.image1.afterUploadImgList.join(","),
							reference:this.$refs.image2.afterUploadImgList.length?this.$refs.image2.afterUploadImgList.join(",") : '',
							urgent:e
						}).then(res => {
							
							if(Array.isArray(res)){
								this.$refs.uToast.show({
									title: '设计上传中,请耐心等候',
									type: 'success',
									callback:()=>{
										uni.pageScrollTo({
											scrollTop:9999999
										})
										this.getList()
									}
									
								})
							}else{
								
								let packages = res.package;
								let {
									noncestr,
									timestamp,
									signtype,
									paysign
								} = res;
								payway.wx(timestamp, noncestr, packages, signtype, paysign).then(res => {
									this.$refs.uToast.show({
										title: '设计上传中,已经免排队',
										type: 'success',
									})
								}).catch(err => {
									uni.navigateBack({
								
									})
								})
							}
							
						}).catch(err => {
				     	})
					} else {
						console.log('验证失败');
					}
				});
			},
			getList() {
				this.$u.post('/index/queue', {}).then(res => {
					this.list = res
				}).catch(err => {

				})
			}
		}
	}
</script>

<style>
	.bg {
		width: 750rpx;
		padding: 20rpx 20rpx 20rpx 50rpx;
		background: linear-gradient(to top, #FFCB87, #FF9D62);
		height: 400rpx;
		color: #fff;
		display: flex;
		justify-content: space-between;
	}

	.title {
		font-size: 50rpx;
		letter-spacing: 10rpx;

	}

	.u-form-item__message {
		text-align: right;
	}

	.list {
		display: flex;
		justify-content: space-between;
	}


	.new {
		background: #FFFFFF;
		margin: 20rpx auto;
		width: 690rpx;
		border-radius: 20rpx;
		padding: 20rpx;
	}

	.scroll-view {
		height: 300rpx;
		position: relative;
		overflow: hidden;

	}
</style>
